<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:1400px;height:400px"></div>
<script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      var data = [{% for item in picl.0 %}'{{ item }}',{% endfor %}];
      var data1 = [{% for item in picl.1 %}'{{ item }}',{% endfor %}];
      var data2 = [{% for item in picl.2 %}'{{ item }}',{% endfor %}];
      var data3 = [{% for item in picl.3 %}'{{ item }}',{% endfor %}];
      var data4 = [{% for item in picl.4 %}'{{ item }}',{% endfor %}];
      var data5 = [{% for item in picl.5 %}'{{ item }}',{% endfor %}];

option = {
  title: {
    text: '疫情堆叠图'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['新增', '现有', '累计', '治愈', '死亡']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: true,
    data: data
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '新增',
      type: 'line',
      stack: 'Total',
      data: data1
    },
    {
      name: '现有',
      type: 'line',
      stack: 'Total',
      data: data2
    },
    {
      name: '累计',
      type: 'line',
      stack: 'Total',
      data: data3
    },
    {
      name: '治愈',
      type: 'line',
      stack: 'Total',
      data: data4
    },
    {
      name: '死亡',
      type: 'line',
      stack: 'Total',
      data: data5
    }
  ]
};

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);





</script>

</body>
</html>